<script setup>
import {ref} from "vue";
import instance from "@/utils/request.js";
import {baseURL} from "@/utils/request.js";
import {useUserStore} from "@/store/modules/student/index.js";
import {onMounted} from "vue";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const userStore = useUserStore()
const formData = [{
      课程名称: '数据结构',
      学分: '3.0',
      授课老师: '孙七',
      课程开始时间: '2024.11.18',
      课程结束时间: '2024.12.18'
    },
    {
      课程名称: '操作系统原理',
      学分: '3.5',
      授课老师: '周八',
      课程开始时间: '2024.11.10',
      课程结束时间: '2024.12.10'
    },
    {
      课程名称: '软件工程',
      学分: '4.0',
      授课老师: '吴九',
      课程开始时间: '2024.11.22',
      课程结束时间: '2024.12.22'
    },
    {
      课程名称: '网络技术基础',
      学分: '2.5',
      授课老师: '郑十',
      课程开始时间: '2024.11.29',
      课程结束时间: '2024.12.29'
    },
    {
      课程名称: '现代文学',
      学分: '2.0',
      授课老师: '刘十一',
      课程开始时间: '2024.11.14',
      课程结束时间: '2024.12.14'
    },
    {
      课程名称: '艺术史',
      学分: '2.0',
      授课老师: '陈十二',
      课程开始时间: '2024.11.19',
      课程结束时间: '2024.12.19'
    }]


const queryString = ref({
  //课程名
  courseName: '',
  //排序条件
  sortBy: null,
  //升序或降序
  //0降序 1升序
  ascendOrNot: null,
})
const pagination = ref({
  currentPage: 1,
  pageSize: 6,
  total: 0
})

//通过生命周期函数在vue对象创建时获取成绩信息
onMounted(() => {
  //findPage()
})

//获取课程信息
const findPage = () => {

  const param = {

  }

  instance.post(baseURL + "/student/findPage", param).then(res => {
    formData.value = res.data.data.list
    pagination.value.total = res.data.data.totals
  }).catch((e) => {
    console.log(e)
  })
}
const handleCurrentChange = (currentPage) => {
  pagination.value.currentPage = currentPage;
  findPage();
}

const handleQuery = () => {
  try {
    handleCurrentChange(1)

    ElMessage.success('查询成功')
  }catch (e) {
    ElMessage.error('查询失败')
    console.log(e)
  }

}
</script>

<template>
  <div class="content-header">
    <el-input v-model="queryString.courseName" placeholder="请输入课程名称" clearable class="input-wrapper">
      <template #prefix>
        <el-icon>
          <Search/>
        </el-icon>
      </template>
    </el-input>
    <el-select v-model="queryString.sortBy" clearable placeholder="选择排序类型" class="select-wrapper" size="large">
      <el-option label="学分" value="course_credit"/>
    </el-select>
    <el-select v-model="queryString.ascendOrNot" clearable placeholder="选择升序或降序" class="select-wrapper" size="large">
      <el-option label="升序" value="asc"/>
      <el-option label="降序" value="desc"/>
    </el-select>
    <el-button type="primary" @click="handleQuery" style="height: 50px;margin: 5px 0 0 10px" >
      确定
    </el-button>
  </div>

  <div class="content-table">
    <el-table :data="formData" class="test">
      <el-table-column prop="课程名称" label="课程名称" width="150px"/>
      <el-table-column prop="学分" label="学分" width="150px"/>
      <el-table-column prop="授课老师" label="授课老师" width="120px"/>
      <el-table-column prop="课程开始时间" label="课程开始时间" width="180px"/>
      <el-table-column prop="课程结束时间" label="课程结束时间" width="180px"/>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination background
                     @current-change="handleCurrentChange"
                     v-model:current-page="pagination.currentPage"
                     v-model:page-size="pagination.pageSize"
                     :total="pagination.total"
                     layout="total, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<style scoped>
.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.input-wrapper {
  flex: 1;
  margin-right: 10px;
}

.select-wrapper {
  width: 150px;
  margin-right: 10px;
}

.content-table {
  margin: 10px;
  border-collapse: collapse;
}

.el-table {
  width: 100%;
  border: 1px solid #e0e0e0;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-header,
  .pagination-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .input-wrapper,
  .select-wrapper {
    width: 100%;
    margin-bottom: 10px;
  }

  .el-table {
    display: block;
    overflow-x: auto;
  }
}
</style>